import React,{useReducer} from 'react';
import ContentLoader, { Facebook,Instagram,Code,BulletList,Rect, Circle    } from 'react-content-loader'  //List，这个跟下面LIST冲突，不演示
import { Button, List } from 'antd-mobile';
import NavHome from '../NavHome/NavHome';
import './Skeleton.scss'
let initState={
    animate:true, //是否关闭动画
    title:'Loading interface',//用来描述是什么元素
    baseUrl:'',//如果您使用<base url="/" />则必填
    speed:2, //动画速度，秒为单位
    interval:0.25,//动画运行之间的时间间隔
    viewBox:'0 0 400 70',//使用viewBox属性设置自定义viewBox值
    gradientRatio:3,//动画渐变的宽度
    rtl:false,//内容从右到左
    backgroundColor:'#777',//动画背景
    backgroundOpacity:1,//背景透明度
    foregroundColor:'#bfb9b9',//动画过渡背景
    foregroundOpacity:1,//动画过渡背景透明度
    style:{'width':'90%','margin':'0 auto','display':'block','padding':'20px 0'},//样式
    uniqueKey:'1',
    ing:false
};
function stateReducer(state,action){
    switch(action.type){
        case 'offAnimate':
            return{
                ...state,
                animate:false
            }
        case 'onAnimate':
            return{
                ...state,
                animate:true
            }    
        case 'offRtl':
            return{
                ...state,
                rtl:false
            }
        case 'onRtl':
            return{
                ...state,
                rtl:true
            }        
        case 'setIng':
            return{
                ...state,
                ing:true
            }    
         default: 
            return state;    
    }
}


export default function Skeleton(){
    const [state, dispatch] = useReducer(stateReducer, initState);
    
    function changeAnimate(){
        if(state.animate){
            dispatch({type:'offAnimate'})
        }else{
            dispatch({type:'onAnimate'})
        }
    }
    function changeRtl(){
        if(state.rtl){
            dispatch({type:'offRtl'})
        }else{
            dispatch({type:'onRtl'})
        }
    }
    function arryState(){
        let Arry = [];
        for(var i in initState){
            Arry.push(i+':'+initState[i])
        }
        setTimeout(()=>{    
            dispatch({type:'setIng'})
        },1500) 
        return Arry
        
    }
    return(
        <div>
            <ContentLoader 
                title={state.title} 
                animate={state.animate}
                baseUrl={state.baseUrl}
                speed={state.speed}
                interval={state.interval}
                viewBox={state.viewBox}
                gradientRatio={state.gradientRatios}
                rtl={state.rtl}
                backgroundColor={state.backgroundColor}
                foregroundColor={state.foregroundColor}
                backgroundOpacity={state.backgroundOpacity}
                foregroundOpacity={state.foregroundOpacity}
                style={state.style}
                uniqueKey={state.uniqueKey}
            >
                {/* X,cx为距离左侧;y,cy为距离上侧;rx,ry,r为radius; */}
                <rect x="48" y="8" rx="3" ry="3" width="88" height="6" /> 
                <rect x="48" y="26" rx="3" ry="3" width="52" height="6" /> 
                <rect x="0" y="56" rx="3" ry="3" width="410" height="6" /> 
                <rect x="0" y="72" rx="3" ry="3" width="380" height="6" /> 
                <rect x="0" y="88" rx="3" ry="3" width="178" height="6" /> 
                <circle cx="19" cy="19" r="19" />
            </ContentLoader>
            
                <List.Item
                extra={<Button onClick={()=>{changeAnimate()}} type="primary" size="small" inline>{state.animate?'关闭':'打开'}</Button>}
                multipleLine
                >
                参数：animate
                <List.Item.Brief>
                   是否关闭动画<br/>默认true
                </List.Item.Brief>
                </List.Item>
                <List.Item
                extra={<Button onClick={()=>{changeRtl()}} type="primary" size="small" inline>{state.rtl?'关闭':'打开'}</Button>}
                multipleLine
                >
                参数：rtl
                <List.Item.Brief>
                   内容从右左<br/>默认false
                </List.Item.Brief>
                </List.Item>
                <ul className="stateStatus">
                    <h3>更多参数</h3>
                   <ContentLoader 
                        backgroundColor={state.backgroundColor}
                        foregroundColor={state.foregroundColor}
                        backgroundOpacity={state.backgroundOpacity}
                        foregroundOpacity={state.foregroundOpacity}
                        uniqueKey='2'
                        style={{width:'100%',height:'200px',display: state.ing?'none':'block'}}
                    >
                        <rect x="0" y="50" rx="3" ry="3" width="100%" height="10" /> 
                        <rect x="0" y="70" rx="3" ry="3" width="100%" height="10" /> 
                        <rect x="0" y="90" rx="3" ry="3" width="100%" height="10" /> 
                        <rect x="0" y="110" rx="3" ry="3" width="100%" height="10" /> 
                        <rect x="0" y="130" rx="3" ry="3" width="100%" height="10" /> 
                        <rect x="0" y="150" rx="3" ry="3" width="100%" height="10" /> 
                        <rect x="0" y="170" rx="3" ry="3" width="100%" height="10" /> 
                        <rect x="0" y="190" rx="3" ry="3" width="100%" height="10" /> 
                        <rect x="0" y="210" rx="3" ry="3" width="100%" height="10" /> 
                        <rect x="0" y="230" rx="3" ry="3" width="100%" height="10" /> 
                        
                    </ContentLoader>
                    <div style={{display: state.ing?'block':'none'}}>
                        {
                            
                            arryState().map((i,k)=>{
                            return <li key={k}>{i}</li>
                            })
                        
                        }
                    </div>
                </ul>
                <NavHome/>
            </div>
    )
}